<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      //拦截器，
      axios.interceptors.request.use(function (config) {
        const token = localStorage.getItem("token")
        config.headers.Authorization = `Bearer ${token}`
        return config;
      }, function (error) {
        return Promise.reject(error);
      });
  
      axios.interceptors.response.use(function (response) {
        console.log(response);
        const {
          authorization
        } = response.headers
        authorization && localStorage.setItem("token", authorization)
        return response;
      }, function (error) {
        if(error.response.status===401){
          localStorage.removeItem("token")
          location.href = "/login"
        }
        return Promise.reject(error);
      });
    </script>
  </head>
  <body>
    <div>
      <div>
        用户名:
        <input id="username" />
      </div>
      <div>
        密码:
        <input type="password" id="password" />
      </div>
      <div>
        年龄:
        <input type="number" id="age" />
      </div>

      <div>
        <button id="loginpost">注册</button>
      </div>
      <div>
        <button id="update">更新</button>
      </div>
      <div>
        <button id="delete">删除</button>
      </div>
    </div>

    <table border="1">
      <thead>
        <tr>
          <th>名字</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      var ologin = document.querySelector('#login');
      var register = document.querySelector('#loginpost');
      var update = document.querySelector('#update');
      var username = document.querySelector('#username');
      var password = document.querySelector('#password');
      var age = document.querySelector('#age');
      var mydelete = document.querySelector('#delete');
      let tbody = document.querySelector('tbody');
      
      register.onclick = () => {
        axios.post("/users", {
        username: username.value,
        password: password.value,
        age: age.value
      }).then(res => {
        console.log(res.data)
      })
      };

      update.onclick = () => {
        axios.put("/users/6258dc3f33421325ae9c519f", {
        username: "修改的名字",
        password: "修改的密码",
        age: 1
      }).then(res => {
        console.log(res.data)
      })
      };

      mydelete.onclick = () => {
        //get请求
        fetch(`/users/62b0144f52336a0ba078fc5d`, {
          method: 'DELETE',
        })
          .then(res => res.json())
          .then(res => {
            console.log(res);
          });
      };

        axios.get("/users?page=1&limit=10").then(res => {
      res = res.data
      var tbody = document.querySelector("tbody")
      tbody.innerHTML = res.map(item => `
      <tr>
          <td>${item.username}</td>
          <td>${item.age}</td>
        </tr>`).join("")
    })
    //     exit.onclick = () => {
    //   localStorage.removeItem("token")
    //   location.href = "/login"
    // }
    </script>
  </body>
</html>
